<template>
  <div class="contact">
    <img
      class="banner"
      :src="banner.pic"
      alt=""
    >
    <section class="contact-wrapper">
      <p class="title">北京绿凯园林工程有限公司</p>
      <p class="text"><img
          class="icon"
          src="@/assets/imgs/location.png"
          alt=""
        >地址：北京市海淀区西郊半壁店59号二层2018室</p>
      <p class="text"><img
          class="icon"
          src="@/assets/imgs/phone.png"
          alt=""
        >座机：010 - 88504811</p>
      <p class="text"><img
          class="icon"
          src="@/assets/imgs/mail.png"
          alt=""
        >邮箱：wuoeeeee@163.com</p>
      <iframe
        src="./map1.html"
        frameborder="0"
        width="1200"
        height="560"
      ></iframe>
      <p class="title">房山窦店苗圃基地</p>
      <p class="text"><img
          class="icon"
          src="@/assets/imgs/location.png"
          alt=""
        >地址：北京市房山区窦店刘平庄往东500米</p>
      <p class="text"><img
          class="icon"
          src="@/assets/imgs/phone.png"
          alt=""
        >联系电话：13439800510</p>
      <iframe
        src="./map2.html"
        frameborder="0"
        width="1200"
        height="560"
      ></iframe>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bigIndex: 0,
      smallIndex: 0,
      banner: {}
    };
  },
  mounted() {
    this.getBanner();
  },
  methods: {
    async getBanner() {
      let res = await this.$fetch("/api/getBanner", {
        type: 4
      });
      if (res.data.length) {
        this.banner = res.data[0];
      }
    },
    clickBigItem(index) {
      this.bigIndex = index;
    },
    clickSmallItem(index) {
      this.smallIndex = index;
    }
  }
};
</script>
<style lang="scss" scoped>
.contact {
  background: #fafafa;
  min-height: 100vh;
  .banner {
    width: 100%;
    min-width: 1200px;
    height: 380px;
  }
  .contact-wrapper {
    width: 1200px;
    margin: 0 auto;
    font-weight: bold;
    color: #333333;
    text-align: left;
    .title {
      margin: 40px 0 30px 0;
      font-size: 32px;
    }
    .text {
      font-size: 24px;
      margin-bottom: 20px;
      .icon {
        width: 22px;
        height: 22px;
        margin-right: 15px;
        vertical-align: top;
      }
    }
  }
}
</style>